<template>
  <div>
    <div>
      <span class="demonstration">订单日期：</span>
      <el-date-picker v-model="value2"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div class="bj1">
      <span>请选择省</span>
      <el-select span="18" v-model="value" placeholder="全部省份">
        <el-option v-for="item in cities"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
      <span>请选择市</span>
      <el-select v-model="value" placeholder="全部市">
        <el-option v-for="item in cities"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
      <span>请选择区</span>
      <el-select v-model="value" placeholder="全部区">
        <el-option v-for="item in cities"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
        </el-option>
      </el-select>
      <el-button>筛选</el-button>

    </div>
    <div id="test2">
      <div class="counts">
       <b> 成交用户数量</b>
        <p>9人</p>

      </div>
      <div class="counts">
        <b>用户注册统计</b>
        <p>15人</p>
      </div>
      <div class="counts">
        <b>销售统计</b>
        <p>83张</p>
      </div>
    </div>
  </div>


</template>
<style scoped>
  .counts {
    width: 224px;
    height: 80px;
    background-color: #fff;
    margin-top: 30px;
    padding:15px;
    border-radius: 5px;
    box-sizing: border-box;
    color:#333;
  }
  .counts>p{
      margin-top:10px;
  }

  #test2 {
     width:700px;
    height: 100px;
    display: flex;
    justify-content: space-between;
  }

  .counts:hover {
    box-shadow: 0 2px 12px 0px rgba(232,168,5,0.3);
    transition: box-shadow .5s;
  }


  .bj1 {
    margin-top: 20px;
    border: 20px;
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;
    width: 100%;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #f5f5f5;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 0px 0;
    background-color: #f9fafc;
  }
</style>
